<template>
	<div class="tools-warp">
		<el-card shadow="hover">
			<div slot="header">
				<div style="width: 400px; display: flex;align-items: center;">
					<!-- <el-input v-model="parms.keyword" placeholder="请输入内容" style="margin-right: 10px;"></el-input><el-button
						type="primary" @click="sherchQuer">查询</el-button>  -->
                        <el-button type="success"
						@click="addcanpus">上传协议</el-button>
				</div>
			</div>
			<el-table :data="tableData" stripe style="width: 100%">
				<el-table-column prop="name" label="协议名称" align="center">
				</el-table-column>
				<el-table-column prop="remarks" label="备注" align="center">
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="250" align="center">
					<template slot-scope="scope">
						<el-button @click="handleEdit(scope.row)" type="primary" size="small">预览</el-button>
						<el-button @click="handleClick(scope.row)" type="danger" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="padding: 20px 0;">
				<el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</el-card>
		<el-dialog :title="texts" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="协议文件" prop="telPhone">
					<el-upload
						class="upload-demo"
						:action="authurl"
						:on-remove="handleRemove"
                        :headers="headers"
						:before-remove="beforeRemove"
						multiple
						:limit="1"
                        accept="doc/docx"
                        :on-success="handleAvatarSuccess"

						:on-exceed="handleExceed"
						:file-list="fileList">
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">请上传上传doc/docx文件</div>
					</el-upload>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="ruleForm.remarks" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
						placeholder="请输入备注"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="resetForm('ruleForm')">取 消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
			</span>
		</el-dialog>
        <el-dialog title="预览" :visible.sync="dialoglook" width="90%" :close-on-click-modal="false">
			<div>
                 <embed  :src="pdfUrl"
                    type="application/pdf"
                    width="100%"
                    height="800px">
                        </div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialoglook=false">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { Session } from '@/utils/storage';
import { allAdminApi } from '@/api/allapi';

import * as mammoth from 'mammoth';

const adminApi = allAdminApi();
export default {
    name: 'agreement',
    data() {

        return {
            headers:{
                "Authorization": 'bearer ' + `${Session.get('token')}`,
            },
            authurl:"https://www.fbty.tech/api/api/accessory/uploadpdf",

            pdfUrl:"",

            vHtml: "",
            wordURL:'',//文件地址

            documentUrl: '',
            imageUrl: '',
            htmlContent: "",
            texts: "上传协议",
            headers:{
                "Authorization": 'bearer ' + `${Session.get('token')}`,
            },
            doxUrls:"",
            dialogVisible: false,
            dialoglook:false,
            tableData: [],
            total: 0,
            miniparms: {
                keyword: "",
                classId: "",
            },
            parms: {
                limit: 10,
                page: 1,
                keyword: "",
            },
            ruleForm: {
                name: '',
                filePath: '',
                remarks: '',
            },
            objs: {},
            rules: {},
            fileList: []
        };
    },
    created(){
        
    },
    mounted() {
        this.sherchList()
        
    },
    methods: {
        handleEdit(row) {
            this.dialoglook = true;
            this.pdfUrl = row.pdfFilePath;
        },
        sherchQuer() {
            this.parms.page = 1
            this.sherchList()
        },
        handleCurrentChange(val) {
            this.parms.page = val
            this.sherchList()
        },
        sherchList() {
            adminApi.agreementApi(this.parms).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.result;
                    this.total = res.count;
                }
            })
        },
        handleClick(row) {
            this.$confirm('此操作将永久删除该协议, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                adminApi.deletProtocolinfo(row.id).then((res) => {
                    if (res.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.sherchList()
                    }
                })
            })
        },
        resetForm(formName) {
            
            this.ruleForm.name = "";
            this.ruleForm.filePath = "";
            this.ruleForm.remarks = "";
            this.fileList = [];
            this.$refs[formName].resetFields();
            this.dialogVisible = false;
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    adminApi.addProtocolinfoApi(this.ruleForm).then((res) => {
                        if (res.code == 200) {
                            this.$message.success(res.msg);
                            this.$refs[formName].resetFields();
                            this.ruleForm.name = "";
                            this.ruleForm.filePath = "";
                            this.ruleForm.remarks = "";
                            this.fileList = [];
                            this.sherchList()
                            this.dialogVisible = false
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        addcanpus() {
            this.texts = "上传协议";
            this.dialogVisible = true;
        },
        handleRemove(file, fileList) {
        console.log(file, fileList);
      },
       handleAvatarSuccess(res, file) {
        console.log(file)
            this.ruleForm.filePath = res.result.path
            this.ruleForm.name = res.result.name;
        },
    
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    },
};
</script>

<style lang="scss">
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>